<template>
  <div id="wrongQuestion">
  </div>
</template>

<script>
import echarts from 'echarts'
import waldenProject from './walden.project'

// echarts.registerTheme('walden', waldenProject)

export default {
  props: {
    dataList: {
      type: Array,
      default() {
        return []
      }
    }
  },
  data() {
    return {
      questionList: [],
      typeInfo: ['判断题', '单选题', '多选题', '填空题', '主观题']
    }
  },
  name: 'WrongQuestion',
  watch: {
    dataList(v) {
      this.renderData()
    }
  },
  mounted() {
    this.renderData()
    // this.init()
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.resize.bind(this))
  },
  methods: {
    renderData() {
      if (this.dataList && this.dataList.length > 0) {
        const data = []
        const dataInfo = []
        for (const item of this.dataList) {
          data.push(item.questionContent)
          dataInfo.push({
            name: item.questionContent,
            value: item.wrongNum,
            proportion: item.proportion,
            questionType: item.questionType
          })
        }
        this.init(data, dataInfo)
      } else {
        this.questionList = []
      }
    },
    init(data, dataInfo) {
      this.myChart = echarts.init(document.getElementById('wrongQuestion'), waldenProject.theme)
      const typeInfo = ['判断题', '单选题', '多选题', '填空题', '主观题']

      const option = {
        title: {
          text: '错题统计'
        },
        tooltip: {
          trigger: 'item',
          formatter(params) {
            // 数据在这里里面
            return typeInfo[params.data.questionType] + '-' + `${params.name}<br/>
            正确率：${params.data.proportion}%<br/>
            `
          }
        },
        legend: {
          left: 'center',
          top: 'bottom',
          data: data
        },
        grid: {
          x: 0,
          y: 0,
          x2: 0,
          y2: 35
        },
        series: [
          {
            name: '错题统计',
            type: 'pie',
            radius: [30, 110],
            // center: ['75%', '50%'],
            roseType: 'area',
            data: dataInfo
          }
        ]
      }

      // 使用刚指定的配置项和数据显示图表。
      this.myChart.setOption(option)

      window.addEventListener('resize', this.resize.bind(this))
    },
    resize() {
      this.myChart.resize()
    }
  }
}
</script>

<style>
#wrongQuestion {
  width: 100%;
  min-height: 400px;
}

.dot1 {
  width: 10px;
  height: 10px;
  background: red;
}
</style>
